/**
* 弹窗组件，使用： this.$store.dispatch('setModal', {visible: true, modalId: 'subscribeModal',relationUserCode:'',callback:function(response){}});
*/
<template>
  <transition name="slide-fade">
    <div v-if="modal.visible && modal.modalId=='subscribeModal'" class="modal" id="subscribeModal" tabindex="-1" @click.stop.prevent="modalHide">
      <div class="modal-dialog" @click.stop.prevent>
        <div class="modal-content">
          <img src="~assets/images/tankuang-l@2x.png" class="img-responsive">
          <img src="~assets/images/close@2x.png" data-dismiss="modal" class="img-close" @click.stop.prevent="modalHide">
          <div class="oxhead">
            <img src="https://dl.app.gtja.com/nrng/shareimages/oxhead/niudengpao.png">
          </div>
          <div class="wrapper">
            <h4><span style="font-size: 12px;">看牛人比赛持仓需要先订阅该牛人哦~</span><br>订阅该牛人需要花费你<br><span><span class="cost">{{relationSubscribePrice}}</span>个君元宝</span>，你愿意么?</h4>
            <p>订阅后你会在牛人牛股动态首页第一时间收到该牛人的所有调仓信息</p>
            <div class="junyuanbao">
              <img src="~assets/images/junyuanbao@3x.png">
              <div class="wallet-total">
                <div class="value">{{walletTotal}}</div>
                <div class="key">我的君元宝数</div>
              </div>
              <div class="tips">注：君元宝就是你的积分哦</div>
            </div>
            <div class="checkbox">
              <label>
                <i class="icon iconfont" :class="isChecked?'icon-checkbox2':'icon-checkbox'" id="push"  @click.stop.prevent="clickCheck"> </i>给我发送牛人调仓的及时推送信息
              </label>
            </div>
            <button type="button" class="btn btn-lg btn-agree" @click.stop.prevent="toSubscribe">愿意</button>
            <button type="button" class="btn btn-lg btn-reject" @click.stop.prevent="modalHide">算了</button>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  import BaseModal from 'components/modal/BaseModal'
  import RemoteDAO from 'common/remoteDAO'
  import LocalDAO from 'common/localDAO'
  import CommonUtil from 'common/common.util'
  import _ from 'underscore'

  export default {
    data () {
      return {
        walletTotal:0,
        relationSubscribePrice:0,
        isChecked:true
      }
    },
    extends:BaseModal,
    updated:function(){
      var self =  this;
      if(self.modal.modalId == 'subscribeModal'){
        var userCode = LocalDAO.getUserCode();
        RemoteDAO.callUC12000104(userCode,function(response){
          if(Number(response.error) === 0){
            var body = response.data.body || [];
            var walletTotal = parseInt(body[0].WALLET_TOTAL);
            //查询被订阅
            RemoteDAO.callUC12000104(self.modal.relationUserCode,function(resp){
              if(Number(resp.error) === 0 ){
                var body = resp.data.body || [];
                var relationSubscribePrice = parseInt(body[0].SUBSCRIBE_PRICE);
                self.walletTotal = walletTotal;
                self.relationSubscribePrice = relationSubscribePrice;
              }else{
                self.$store.dispatch('setTip',{text:resp.data});
              }
            });
          }else{
            self.$store.dispatch('setTip',{text:response.data});
          }
        });
      }
    },
    methods:{
      clickCheck(){
        var self = this
        if(self.isChecked){
          self.isChecked = false
        }else{
          self.isChecked = true
        }
      },
      toSubscribe(){
        var self = this;
        var args1 = {};
        args1.userCode = LocalDAO.getUserCode();
        args1.actionType = "00";
        args1.businType = "NRNG";
        args1.communityType = "3";
        args1.objectType = "1";
        args1.relationUserCode = self.modal.relationUserCode;
        args1.relationUserName = "";
        args1.beginDate = "";
        args1.endDate = "";
        args1.communityContent = "";
        args1.topicCode = "";
        args1.topicName = "";
        args1.serialNo = "";
        //订阅操作接口
        RemoteDAO.callUC12008306(args1, function (response) {
          if (Number(response.error) === 0) {
            var body = response.data.body || [];
            if (body.length > 0 && body[0].error_no == "0") {
              self.$store.dispatch('setTip',{text:"订阅成功！"});
              LocalDAO.setMySubscribeCount(parseInt(LocalDAO.getMySubscribeCount()) + 1);
              var map = self.getSubMapFromSession();//订阅缓存
              map[args1.relationUserCode]="1"; //订阅的再缓存里标记1
              sessionStorage.setItem("subscribeMap",JSON.stringify(map));

              if (_.isFunction(self.modal.callback)) {
                self.modal.callback(response);
              }

              //推送
              if(self.isChecked){
                var args2 = {};
                args2.userCode = LocalDAO.getUserCode();
                args2.actionType = "00";
                args2.businType = "NRNG";
                args2.communityType = "5";
                args2.objectType = "1";
                args2.relationUserCode = self.modal.relationUserCode;
                args2.relationUserName = "";
                args2.beginDate = "";
                args2.endDate = "";
                args2.communityContent = "";
                args2.topicCode = "" ;
                args2.topicName = "";
                args2.serialNo = "";
                RemoteDAO.callUC12008306(args2, function(resp) {
                  if (Number(resp.error) === 1) {
                    self.$store.dispatch('setTip',{text:resp.data});
                  }
                  self.modalHide()
                });
              }else{
                self.modalHide()
              }
            }
          } else {
            self.$store.dispatch('setTip',{text:response.data});
          }
        });
      },
      getSubMapFromSession(){
        var map = sessionStorage.getItem('subscribeMap');
        if(typeof map === "undefined" || map == null) map = "{}";
        return JSON.parse(map);
      },
      modalHide(){
        this.isChecked = true
        this.$store.dispatch('setModal', {visible: false, modalId: ''});
      }
    }
  }
</script>

<style scoped>
  .slide-fade-enter-active,.slide-fade-leave-active{
    transition: all 0.3s ease;
  }
  .slide-fade-enter, .slide-fade-leave-active {
    transform: translate(0,-25%);
    opacity: 0;
  }
  #push{
    position: absolute;
    left: -8px;
    color: #3b3b3b
  }
</style>
